<template>
  <li>
    <button @click="onScroll(item.id)">{{ item.title }}</button>
    <ul v-if="item.children && item.children.length">
      <TocItem 
        v-for="child in item.children"
        :key="child.id"
        :item="child"
        :on-scroll="onScroll"
      />
    </ul>
  </li>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  onScroll: {
    type: Function,
    required: true
  }
});
</script>

<style scoped>
/* 保持与现有样式一致 */
button {
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: #007bff;
  margin: 5px 0;
}
button:hover {
  text-decoration: underline;
}
ul {
  list-style-type: none;
  padding-left: 20px;
}
</style>